<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>报表管理 - 智慧农场可视化中心</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        :root {
            --primary-color: #00aeff;
            --secondary-color: #001c3a;
            --accent-color: #ff6b35;
            --text-color: #ffffff;
            --text-color-secondary: #b0b0b0;
            --panel-border-color: rgba(0, 174, 255, 0.3);
            --success-color: #52c41a;
            --warning-color: #faad14;
            --error-color: #ff4d4f;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #001c3a 0%, #003366 100%);
            color: var(--text-color);
            min-height: 100vh;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding: 20px;
            background: rgba(0, 28, 58, 0.5);
            border-radius: 10px;
            border: 1px solid var(--panel-border-color);
        }

        .header-title {
            font-size: 24px;
            font-weight: bold;
            color: var(--primary-color);
        }

        .back-btn {
            padding: 10px 20px;
            background: var(--primary-color);
            border: none;
            border-radius: 5px;
            color: white;
            cursor: pointer;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .back-btn:hover {
            background: #0099cc;
        }

        .report-dashboard {
            display: grid;
            grid-template-columns: 1fr 2fr;
            gap: 30px;
        }

        .report-header {
            background: rgba(0, 28, 58, 0.3);
            border: 1px solid var(--panel-border-color);
            border-radius: 10px;
            padding: 25px;
            margin-bottom: 30px;
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .header-title {
            color: var(--primary-color);
            font-size: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .report-actions {
            display: flex;
            gap: 15px;
        }

        .report-btn {
            padding: 10px 20px;
            background: var(--primary-color);
            border: none;
            border-radius: 5px;
            color: white;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s ease;
        }

        .report-btn:hover {
            background: #0099cc;
            transform: translateY(-1px);
        }

        .report-btn.secondary {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid var(--panel-border-color);
        }

        .report-btn.secondary:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        .report-tabs {
            display: flex;
            gap: 10px;
        }

        .report-tab {
            padding: 10px 20px;
            background: rgba(0, 28, 58, 0.5);
            border: 1px solid var(--panel-border-color);
            border-radius: 5px;
            color: var(--text-color);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .report-tab.active {
            background: var(--primary-color);
            border-color: var(--primary-color);
        }

        .report-content {
            background: rgba(0, 28, 58, 0.3);
            border: 1px solid var(--panel-border-color);
            border-radius: 10px;
            padding: 25px;
        }

        .report-summary {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-bottom: 30px;
        }

        .summary-item {
            background: rgba(0, 28, 58, 0.5);
            border: 1px solid var(--panel-border-color);
            border-radius: 8px;
            padding: 20px;
            text-align: center;
        }

        .summary-value {
            font-size: 28px;
            font-weight: bold;
            color: var(--primary-color);
            margin-bottom: 8px;
        }

        .summary-label {
            font-size: 14px;
            color: var(--text-color-secondary);
            margin-bottom: 8px;
        }

        .summary-change {
            font-size: 12px;
            padding: 4px 8px;
            border-radius: 4px;
            display: inline-block;
        }

        .summary-change.up {
            background: rgba(82, 196, 26, 0.2);
            color: var(--success-color);
        }

        .summary-change.down {
            background: rgba(255, 77, 79, 0.2);
            color: var(--error-color);
        }

        .report-details {
            background: rgba(0, 28, 58, 0.5);
            border: 1px solid var(--panel-border-color);
            border-radius: 8px;
            padding: 20px;
        }

        .detail-section {
            margin-bottom: 25px;
        }

        .detail-section:last-child {
            margin-bottom: 0;
        }

        .detail-section h4 {
            color: var(--primary-color);
            margin-bottom: 15px;
            font-size: 16px;
        }

        .report-table {
            width: 100%;
            border-collapse: collapse;
        }

        .report-table th,
        .report-table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .report-table th {
            background: rgba(0, 28, 58, 0.3);
            font-weight: 500;
            color: var(--primary-color);
        }

        .report-table tr:hover {
            background: rgba(0, 28, 58, 0.2);
        }

        .status-badge {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
        }

        .status-normal {
            background: rgba(82, 196, 26, 0.2);
            color: var(--success-color);
        }

        .status-warning {
            background: rgba(250, 173, 20, 0.2);
            color: var(--warning-color);
        }

        .chart-container {
            height: 300px;
            margin-bottom: 20px;
        }

        .report-filters {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
            align-items: center;
        }

        .filter-group {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .filter-group label {
            font-size: 14px;
            color: var(--text-color-secondary);
        }

        .filter-group select,
        .filter-group input {
            padding: 8px 12px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid var(--panel-border-color);
            border-radius: 4px;
            color: white;
            outline: none;
        }

        .filter-group select:focus,
        .filter-group input:focus {
            border-color: var(--primary-color);
        }

        @media (max-width: 768px) {
            .report-dashboard {
                grid-template-columns: 1fr;
            }
            
            .report-summary {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .header-content {
                flex-direction: column;
                gap: 15px;
            }
            
            .report-actions {
                width: 100%;
                justify-content: center;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header class="header">
            <h1 class="header-title">
                <i class="fas fa-file-alt"></i>
                报表管理
            </h1>
            <a href="index_final_version.html" class="back-btn">
                <i class="fas fa-arrow-left"></i>
                返回主页
            </a>
        </header>

        <div class="report-header">
            <div class="header-content">
                <h2 class="header-title">
                    <i class="fas fa-chart-bar"></i>
                    报表中心
                </h2>
                <div class="report-actions">
                    <button class="report-btn">
                        <i class="fas fa-download"></i>
                        导出报表
                    </button>
                    <button class="report-btn secondary">
                        <i class="fas fa-print"></i>
                        打印
                    </button>
                    <button class="report-btn secondary">
                        <i class="fas fa-share"></i>
                        分享
                    </button>
                </div>
            </div>
            
            <div class="report-tabs">
                <button class="report-tab active" data-report="daily">日报</button>
                <button class="report-tab" data-report="weekly">周报</button>
                <button class="report-tab" data-report="monthly">月报</button>
                <button class="report-tab" data-report="yearly">年报</button>
            </div>
        </div>

        <div class="report-dashboard">
            <!-- 报表筛选 -->
            <div class="report-content">
                <h3 style="color: var(--primary-color); margin-bottom: 20px;">
                    <i class="fas fa-filter"></i>
                    筛选条件
                </h3>
                
                <div class="report-filters">
                    <div class="filter-group">
                        <label>时间范围:</label>
                        <input type="date" value="2025-01-01">
                        <span>至</span>
                        <input type="date" value="2025-01-31">
                    </div>
                </div>
                
                <div class="report-filters">
                    <div class="filter-group">
                        <label>作物类型:</label>
                        <select>
                            <option value="">全部</option>
                            <option value="tomato">番茄</option>
                            <option value="cucumber">黄瓜</option>
                            <option value="lettuce">生菜</option>
                        </select>
                    </div>
                    <div class="filter-group">
                        <label>区域:</label>
                        <select>
                            <option value="">全部</option>
                            <option value="A">A区</option>
                            <option value="B">B区</option>
                            <option value="C">C区</option>
                        </select>
                    </div>
                </div>
                
                <div class="chart-container">
                    <canvas id="reportChart"></canvas>
                </div>
            </div>

            <!-- 报表内容 -->
            <div class="report-content">
                <div class="report-summary">
                    <div class="summary-item">
                        <div class="summary-value">2.8吨</div>
                        <div class="summary-label">今日产量</div>
                        <div class="summary-change up">+12.5%</div>
                    </div>
                    <div class="summary-item">
                        <div class="summary-value">4,200kWh</div>
                        <div class="summary-label">今日能耗</div>
                        <div class="summary-change down">-8.3%</div>
                    </div>
                    <div class="summary-item">
                        <div class="summary-value">93%</div>
                        <div class="summary-label">设备运行</div>
                        <div class="summary-change up">+2.1%</div>
                    </div>
                    <div class="summary-item">
                        <div class="summary-value">3</div>
                        <div class="summary-label">告警数量</div>
                        <div class="summary-change down">-40%</div>
                    </div>
                </div>
                
                <div class="report-details">
                    <div class="detail-section">
                        <h4>生产详情</h4>
                        <table class="report-table">
                            <thead>
                                <tr>
                                    <th>作物</th>
                                    <th>产量(kg)</th>
                                    <th>品质等级</th>
                                    <th>状态</th>
                                    <th>区域</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>番茄</td>
                                    <td>1,200</td>
                                    <td>A级</td>
                                    <td><span class="status-badge status-normal">正常</span></td>
                                    <td>A区</td>
                                </tr>
                                <tr>
                                    <td>黄瓜</td>
                                    <td>800</td>
                                    <td>A级</td>
                                    <td><span class="status-badge status-normal">正常</span></td>
                                    <td>B区</td>
                                </tr>
                                <tr>
                                    <td>生菜</td>
                                    <td>600</td>
                                    <td>B级</td>
                                    <td><span class="status-badge status-warning">注意</span></td>
                                    <td>C区</td>
                                </tr>
                                <tr>
                                    <td>辣椒</td>
                                    <td>200</td>
                                    <td>A级</td>
                                    <td><span class="status-badge status-normal">正常</span></td>
                                    <td>A区</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    
                    <div class="detail-section">
                        <h4>设备运行状态</h4>
                        <table class="report-table">
                            <thead>
                                <tr>
                                    <th>设备名称</th>
                                    <th>运行时长</th>
                                    <th>效率</th>
                                    <th>状态</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>风机 #1</td>
                                    <td>18小时</td>
                                    <td>95%</td>
                                    <td><span class="status-badge status-normal">运行中</span></td>
                                </tr>
                                <tr>
                                    <td>水帘 #1</td>
                                    <td>12小时</td>
                                    <td>88%</td>
                                    <td><span class="status-badge status-normal">运行中</span></td>
                                </tr>
                                <tr>
                                    <td>补光灯 #3</td>
                                    <td>8小时</td>
                                    <td>92%</td>
                                    <td><span class="status-badge status-warning">待机</span></td>
                                </tr>
                                <tr>
                                    <td>滴灌阀 #5</td>
                                    <td>6小时</td>
                                    <td>85%</td>
                                    <td><span class="status-badge status-warning">待机</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 报表类型切换
            const reportTabs = document.querySelectorAll('.report-tab');
            reportTabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    reportTabs.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                    
                    const reportType = this.getAttribute('data-report');
                    updateReportData(reportType);
                });
            });

            // 图表初始化
            const ctx = document.getElementById('reportChart').getContext('2d');
            const reportChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ['番茄', '黄瓜', '生菜', '辣椒'],
                    datasets: [{
                        label: '产量 (kg)',
                        data: [1200, 800, 600, 200],
                        backgroundColor: [
                            'rgba(0, 174, 255, 0.8)',
                            'rgba(82, 196, 26, 0.8)',
                            'rgba(250, 173, 20, 0.8)',
                            'rgba(255, 77, 79, 0.8)'
                        ],
                        borderColor: [
                            '#00aeff',
                            '#52c41a',
                            '#faad14',
                            '#ff4d4f'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        x: {
                            grid: {
                                color: 'rgba(255, 255, 255, 0.1)'
                            },
                            ticks: {
                                color: '#b0b0b0'
                            }
                        },
                        y: {
                            grid: {
                                color: 'rgba(255, 255, 255, 0.1)'
                            },
                            ticks: {
                                color: '#b0b0b0'
                            }
                        }
                    }
                }
            });

            function updateReportData(reportType) {
                // 模拟数据更新
                const dataMap = {
                    daily: [1200, 800, 600, 200],
                    weekly: [8500, 5600, 4200, 1400],
                    monthly: [32000, 22000, 18000, 6000],
                    yearly: [380000, 260000, 220000, 72000]
                };
                
                const labelsMap = {
                    daily: ['番茄', '黄瓜', '生菜', '辣椒'],
                    weekly: ['番茄', '黄瓜', '生菜', '辣椒'],
                    monthly: ['番茄', '黄瓜', '生菜', '辣椒'],
                    yearly: ['番茄', '黄瓜', '生菜', '辣椒']
                };
                
                reportChart.data.labels = labelsMap[reportType];
                reportChart.data.datasets[0].data = dataMap[reportType];
                reportChart.update();
            }

            // 导出功能
            document.querySelector('.report-btn').addEventListener('click', function() {
                alert('报表导出功能开发中...');
            });

            // 打印功能
            document.querySelectorAll('.report-btn.secondary').forEach(btn => {
                btn.addEventListener('click', function() {
                    const action = this.textContent.trim();
                    if (action === '打印') {
                        window.print();
                    } else if (action === '分享') {
                        alert('分享功能开发中...');
                    }
                });
            });
        });
    </script>
</body>
</html> 